<template>
  <div class="container">
    <Field v-model="inputValue" placeholder="请选择" @input="showSearch">
      <template #label>
        <div class="title_bd">{{ label }}</div>
      </template>
      <template #button>
        <img src="@/assets/icon/arrow-right.png" alt="" class="icon_down" />
      </template>
    </Field>
    <div class="date-picker_body">
      <div
        v-if="allData.length === 0 && !status.loading"
        class="flex justify-center items-center flex-col flex-1 mt-94px"
      >
        <VanImage
          :src="require('@/assets/icon/empty.png')"
          style="width: 32px; height: 32px"
        ></VanImage>
        <span class="mt-12px text">暂无更多数据</span>
      </div>
      <List
        v-model="status.loading"
        :finished="status.finished"
        finished-text="没有更多了"
        :immediate-check="false"
        offset="0"
        @load="_onLoad"
        v-else
      >
        <RadioGroup v-model="activename">
          <Cell
            v-for="item in allData"
            :key="item.id"
            :title="item.lableName"
            clickable
          >
            <template #right-icon>
              <Radio :name="item.lableName" @click="changevalue(item)">
                <template #icon="props">
                  <img
                    class="img-icon"
                    :src="props.checked ? activeIcon : inactiveIcon"
                  />
                </template>
              </Radio> </template
          ></Cell>
        </RadioGroup>
      </List>
    </div>
  </div>
</template>
<script>
import {
  Toast,
  Field,
  List,
  RadioGroup,
  Radio,
  Cell,
  Image as VanImage,
} from "vant";
import { commonLocationBD } from "@/services/business/HighSeas.js";
import { storeBusinessOpportunity } from "@/services/business/HighSeas.js";
export default {
  props: {
    id: {
      type: Number,
      default: null,
    },
    label: {
      default: "",
    },
    clear: {
      type: Boolean,
      default: null,
    },
  },
  components: {
    Field,
    List,
    RadioGroup,
    Radio,
    Cell,
    VanImage,
  },
  data() {
    return {
      inputValue: "",
      allData: [],
      status: {
        refreshing: false,
        loading: false,
        finished: false,
      },
      pageNum: 0,
      pageSize: 20,
      activeitem: {},
      activename: "",
      activeIcon: require("@/assets/business/icon_choice_active.png"),
      inactiveIcon: require("@/assets/business/icon_choices_default.png"),
    };
  },
  methods: {
    _onLoad() {
      this.pageNum++;
      this.status.finished = false;
      this.status.loading = true;
      this.status.refreshing = false;
      this.getData();
    },
    async getData() {
      try {
        let res = await commonLocationBD({
          id: this.id,
          key: this.inputValue ? this.inputValue : "",
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        });
        res.data.forEach((el) => {
          el.lableName = `${el.name}(${el.jobNo})`;
        });
        this.pageNum = res.pageNum;
        if (this.status.refreshing) {
          this.allData = [];
          this.allData = res.data;
        } else {
          this.allData = [...this.allData, ...res.data];
        }
        this.status.refreshing = false;
        this.status.loading = false;
        if (res.data.length < res.pageSize) {
          this.status.finished = true;
        } else {
          this.status.finished = false;
        }
      } catch (err) {
        Toast(err);
        this.status.finished = true;
        this.status.loading = false;
      }
    },
    // 监听输入框获取焦点
    showSearch() {
      this.pageNum = 1;
      this.status.finished = false;
      this.status.loading = true;
      this.status.refreshing = true;
      this.activeitem = {};
      this.activename = "";
      this.allData = [];
      this.getData();
    },
    changevalue(val) {
      console.log(val);
      this.inputValue = val.name;
      this.activeitem = val;
      this.$emit("changeInputVal", val);
    },
    get_null() {
      this.pageNum = 0;
      this.inputValue = "";
      this.activeitem = {};
      this.activename = "";
      this.allData = [];
      this._onLoad();
    },
  },
  watch: {
    clear(val) {
      if (!val) this.inputValue = "";
    },
  },
};
</script>
<style scoped="scoped" lang="scss">
.container {
  background-color: white;
  .icon_down {
    width: 14px;
    height: 14px;
  }
  ::v-deep.van-field {
    padding: 0;
    height: 60px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eeeeee;
    .van-field__label {
      margin-right: 24px;
    }
  }
  .title_bd {
    color: #5b7fb5;
  }
  button {
    background-color: #4662d9;
    color: white;
    width: 80px;
    border: 2px solid #4662d9;
    cursor: pointer;
  }
  ::v-deep .van-field__label {
    width: auto !important;
  }
  ::v-deep.van-field::after {
    border-bottom: 0;
  }

  .van-field__control {
    padding-left: 12px;
  }
  .date-picker_body {
    @apply h-full overflow-auto;
    height: 252px;
    padding-bottom: 10px;
    background: #f6f6f6;
    border-radius: 10px;
    margin-bottom: 16px;
    padding-top: 6px;
    padding-bottom: 6px;
    .img-icon {
      width: 20px;
      height: 20px;
    }
    .van-cell {
      background-color: transparent;
      padding: 10px 16px;
    }

    .van-cell::after {
      content: "";
      border-bottom: 0;
    }
    .text {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
    }
  }
  .list_box {
    // padding-top: 45px;
    .search-list {
      margin-top: 5px;
      margin-left: 30px;
      overflow-y: auto;
    }
  }
}
</style>
